<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>

<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>杰利联合</title>
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic}/jiu/css/public.css" />
<style>
body {
	background: #f5f5f5;
}

.login_bg {
	width: 100%;
	text-align: center;
}

#logo {
	margin: 9% auto;
	width: 50%;
}

img {
	width: 100%;
}

form {
	width: 90%;
	text-align: left;
	margin: 5px auto;
	font-size: 18px;
}

.login_btn {
	margin-top: 10%;
	width: 100%;
	display: block;
	line-height: 45px;
	height: 45px;
	background: #3399ff;
	border: 0;
	font-size: 20px;
	font-family: "Microsoft YaHei";
	color: white;
	text-align: center;
	border-radius: 5px;
}

.re_btn {
	width: 60%;
	display: block;
	margin-top: 30px;
	line-height: 45px;
	height: 45px;
	border-radius: 20px;
	margin-left: 20%;
	font-size: 20px;
	font-family: "Microsoft YaHei";
	color: black;
	text-align: center;
	margin-top: 10%;
	background-color: #69EA73;
}

.box {
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	align-items: center;
}

.box1 {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	align-items: center;
}

.bei {
	background-color: #ffffff;
	margin-bottom: 15px;
	height: 50px;
	box-shadow: 0px 0px 4px 1px #BDBDBD;
}

label {
	font-size: 16px;
	color: #555;
	line-height: 40px;
	margin-right: 10px;
}

input {
	height: 38px;
	border-style: none;
	padding: 0 4px;
	background-color: rgba(239, 239, 239, 0);
	width: 40%;
	outline: none;
	color: #000000;
}

.msgs {
	display: inline-block;
	padding-left: 0px;
	padding-right: 0px;
	color: #fff;
	font-size: 14px;
	border: 1px solid #3399ff;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #3399ff;
	cursor: pointer;
	width: 32%;
}

form .msgs1 {
	background: #E6E6E6;
	color: #818080;
	border: 1px solid #CCCCCC;
}

.wenzi {
	margin-left: 10px;
	width: 35%;
}
</style>
<script type="text/javascript"
	src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	window.alert = function(name) {
		var iframe = document.createElement("IFRAME");
		iframe.style.display = "none";
		iframe.setAttribute("src", 'data:text/plain,');
		document.documentElement.appendChild(iframe);
		window.frames[0].window.alert(name);
		iframe.parentNode.removeChild(iframe);
	};

	window.confirm = function(message) {
		var iframe = document.createElement("IFRAME");
		iframe.style.display = "none";
		iframe.setAttribute("src", 'data:text/plain,');
		document.documentElement.appendChild(iframe);
		var alertFrame = window.frames[0];
		var result = alertFrame.window.confirm(message);
		iframe.parentNode.removeChild(iframe);
		return result;
	};

	$(function() {

		$(".msgs").click(function() {
			sendMobileSMS();
		});

	});

	function sendMobileSMS() {
		var mobile = $("#mobile").val();
		if (mobile == null || mobile == '') {
			$('#myModal').modal('show');
			$(".modal-body").text("手机号不能为空!");
			return false;
		} else {
			var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
			if (!reg.test(mobile)) {
				/* alert("请正确填写手机号!");
				return false; */
			}
		}
		$.ajax({
			type : 'POST',
			url : "${ctxFront}/jiu/sendMobileSMS",
			dataType : "json",
			cache : true,
			async : false,
			data : {
				mobile : mobile,
				uid : "${uid}"
			},
			success : function(data) {
				if (data.msg == 'success') {
					$('#myModal').modal('show');
					$(".modal-body").text(data.message);
					$(".msgs").unbind("click");
					countDown();
				} else {
					if (data.msg == 'error') {
						$('#myModal').modal('show');
						$(".modal-body").text(data.message);
					} else {
						countDown();
					}
				}
			}
		});
	}

	var validCode = true;
	function countDown() {
		var time = 60;
		var code = $('.msgs');
		if (validCode) {
			validCode = false;
			code.addClass("msgs1");
			var t = setInterval(function() {
				time--;
				code.html(time + "秒");
				if (time == 0) {
					$(".msgs").click(function() {
						sendMobileSMS();
					});

					clearInterval(t);
					code.html("重新获取");
					validCode = true;
					code.removeClass("msgs1");
				}
			}, 1000)
		}
	}

	function submitLogin() {
		var mobile = $("#mobile").val();
		if (mobile == null || mobile == '') {
			$('#myModal').modal('show');
			$(".modal-body").text("手机号不能为空!");
			return false;
		} else {
			var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
			if (!reg.test(mobile)) {
				$('#myModal').modal('show');
				$(".modal-body").text("请正确填写手机号!");
				return false;
			} else {
				var code = $('#code').val();
				if (!(code != null && code != '')) {
					$('#myModal').modal('show');
					$(".modal-body").text("请填写验证码");
					return false;
				}
			}
		}
		var tag=0;
		if (mobile != "" && code != "") {
			if (tag == 1) {
				return;
			}
			tag = 1;

			$
					.getJSON(
							"${ctxFront }/jiu/validateCode",
							{
								mobile : mobile,
								code : code
							},
							function(data) {
								$('#myModal').modal('show');
								$(".modal-body").text(data.message);
								if (data.msg == 'success') {
									$
											.getJSON(
													"${ctxFront }/jiu/submitLogin",
													{
														uid : "${uid}",
														mobile : mobile,
														code : code
													},
													function(data) {
														$('#myModal').modal(
																'show');
														$(".modal-body").text(
																data.message);
														$("#yes")
																.click(
																		function() {
																			if (data.msg == 'success') {
																				window.location.href = "${ctxFront }/jiu/index?uid=${uid}";
																			}
																		});

													});
								} else {
									tag = 0;
								}
							});

		}

	}
</script>
</head>
<body>

	<div class="login_bg">
		<div id="logo" style="margin-top: 11%;">
			<img src="${ctxStatic}/jiu/img/log2.png" alt="杰利联合">
		</div>
		<div style="max-width: 640px;" id="tijiao">
			<form style="">
				<div class="box bei">
					<span class="wenzi">手机号:</span> <input type="number" id="mobile"
						style="margin-right: 10px; text-align: left; margin-left: -40px; line-height: 30px; font-size: 18px;"
						placeholder="请输入手机号">
				</div>
				<div class="box bei">
					<span class="wenzi">验证码:</span> <input type="text" id="code"
						style="margin-right: 10px; margin-left: -40px; font-size: 18px;"/>
					<span class="msgs">获取验证码</span>
				</div>
				<button class="login_btn" type="button" onclick="submitLogin()">登&nbsp;&nbsp;录</button>
			</form>
			<a class="re_btn" href="javascript:register()" style="">注册</a>
		</div>
	</div>
	<div class="modal fade" style="margin-top: 30%;" id="myModal"
		tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header" style="width: 100%; position: relative">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close"
						style="position: absolute; right: 10px; text-align: right">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">操作提示</h4>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer"
					style="display: flex; justify-content: space-between;">
					<button type="button" class="btn btn-success" data-dismiss="modal"
						id="yes" style="width: 100px">确定</button>
					<button style="width: 100px;background:red;" type="button" class="btn btn-danger"
						data-dismiss="modal" id="no">取消</button>
				</div>
			</div>
		</div>
	</div>
	<script>
		//注册
		function register() {
			window.location.href = "${ctxFront }/jiu/register?uid=${uid}&v="
					+ Math.random();
		}
	</script>
</body>

</html>